import { server } from '../libs/server.js';
import { createApp } from '../libs/vue.browser.js';
import { tools } from '../libs/tools.js';

let app = createApp({
  // 所有要在页面上使用的变量都要定义在data里面
  data() {
    return {
      title: '数据联动',
      plist: [],
      clist: [],
      pid: -1,
      cid: -1,
      tools: tools,
      // 是否正在加载中
      loading: false,
    };
  },
  // 所有要在页面上使用的方法都要定义在methods里面
  methods: {
    query() {
      this.loading = true;
      server.post('/linkinfo/queryAllProvince', {}, (data) => {
        this.loading = false;
        if (data.success) {
          this.plist = data.list;
          // 选中第一项（自己思考如何选中中间项）
          this.pid = this.plist[0].pid;
          this.queryCity();
        } else {
          alert(data.message);
        }
      });
    },
    queryCity() {
      this.loading = true;
      server.post(
        '/linkinfo/queryCityByProvince',
        {
          pid: this.pid,
        },
        (data) => {
          // setTimeout(() => {
          //   this.loading = false;
          // }, 5000);

          this.loading = false;

          if (data.success) {
            this.clist = data.list;
            // 选中默认值有一个注意事项，就是数组有可能没有数据
            this.cid = this.clist[0].cid;
          } else {
            alert(data.message);
          }
        }
      );
    },
  },
  // vue创建完毕后要自动执行代码放在created里面
  created() {
    // vue实例创建完成后会执行的代码
    console.log('vue创建完毕');
    this.query();
  },
});

app.mount('#app');

// 完成部门员工联动效果和班级学生联动效果
